<template>
  <div>
    <v-menu>
      <template v-slot:activator="{ props: menu }">
        <v-tooltip location="top">
          <template v-slot:activator="{ props: tooltip }">
            <v-btn color="primary" v-bind="mergeProps(menu, tooltip)">
              Dropdown w/ Tooltip
            </v-btn>
          </template>
          <span>this is a tooltip</span>
        </v-tooltip>
      </template>
      <v-list>
        <v-list-item v-for="(item, index) in items" :key="index">
          <v-list-item-title>{{ item.title }}</v-list-item-title>
        </v-list-item>
      </v-list>
    </v-menu>
  </div>
</template>
<script>
import { mergeProps } from 'vue';

export default {
  data() {
    return {
      items: [
        { title: 'btn1' },
        { title: 'btn2' },
        { title: 'btn3' },
        { title: 'btn4' }
      ]
    }
  },
  methods: {
    mergeProps
  }
}
//https://stackoverflow.com/questions/53699833/can-a-ui-component-be-an-activator-for-two-items-trying-to-use-a-v-tooltip-wit
</script>